<script setup lang="ts">
import ToolsGrid, { type ToolDef } from '../components/toolkit/ToolsGrid.vue'
import ThemeToggle from '../components/ThemeToggle.vue'
import TextCounter from '../components/tools/TextCounter.vue'
import JsonFormatter from '../components/tools/JsonFormatter.vue'
import UnitConverter from '../components/tools/UnitConverter.vue'
import ScientificCalculator from '../components/tools/ScientificCalculator.vue'
import PasswordGenerator from '../components/tools/PasswordGenerator.vue'
import ColorPicker from '../components/tools/ColorPicker.vue'
import Base64ImageTool from '../components/tools/Base64ImageTool.vue'

const tools: ToolDef[] = [
  {
    id: 'text-counter',
    name: '文本计数器',
    description: '统计文本的字符、单词和句子数量',
    icon: 'fa-file-text-o',
    category: 'text',
    component: TextCounter,
  },
  {
    id: 'json-formatter',
    name: 'JSON格式化',
    description: '格式化、压缩与验证 JSON 数据',
    icon: 'fa-code',
    category: 'developer',
    component: JsonFormatter,
  },
  {
    id: 'unit-converter',
    name: '单位转换器',
    description: '长度、重量、面积、体积与温度转换',
    icon: 'fa-exchange',
    category: 'converter',
    component: UnitConverter,
  },
  {
    id: 'base64-image',
    name: 'Base64图片转换',
    description: '图片与Base64双向转换，显示尺寸与大小',
    icon: 'fa-picture-o',
    category: 'converter',
    component: Base64ImageTool,
  },
  {
    id: 'scientific-calculator',
    name: '科学计算器',
    description: '基础运算与常用函数计算',
    icon: 'fa-calculator',
    category: 'calculator',
    component: ScientificCalculator,
  },
  {
    id: 'password-generator',
    name: '密码生成器',
    description: '生成强度可控的随机密码',
    icon: 'fa-key',
    category: 'utilities',
    component: PasswordGenerator,
  },
  {
    id: 'color-picker',
    name: '颜色选择器',
    description: '选择颜色并获取 HEX/RGB/HSL',
    icon: 'fa-eyedropper',
    category: 'utilities',
    component: ColorPicker,
  },
]
</script>

<template>
  <div class="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
    <div class="container mx-auto px-4 py-6">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-2">
          <i class="fa fa-wrench text-primary text-2xl"></i>
          <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">工具集合</h1>
        </div>
        <ThemeToggle />
      </div>
      <ToolsGrid :tools="tools" />
    </div>
  </div>
  
</template>

<style scoped></style>